<template>
  <div @scroll="handleScroll()" class="project-container" v-loading='isLoading' ref="Project">
    <router-link   v-for="item in data" :key="item.id"  :to="{name:item.url}" class="project-item">
      <img  class="thumb" v-lazying="item.thumb" alt="">
      <div class="info">
        <h2>{{item.name}}</h2>
        <p>{{item.description}}</p>
      </div>
    </router-link>

  </div>
</template>

<script>
export default {
  methods:{
    handleScroll(){
      this.$bus.$emit("blogScroll", this.$refs.Project);
    }
  },
  created(){
    this.$store.dispatch('project/getProjectData');
  },
  computed:{
    isLoading(){
      return this.$store.state.project.loading;
    },
    data(){
      return this.$store.state.project.data;
    }
  }

}
</script>

<style lang='less' scoped>
*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  color: black;
}
.project-container{
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: 20px;
  position: relative;
  scroll-behavior: smooth;
}
.project-item{
  padding: 20px;
  display: flex;
  margin-bottom: 20px;
  &:hover{
    box-shadow: -1px 1px 5px #000;
    transform: scale(1.01) translate(3px, -3px);
  }
  .thumb{
    width: 250px;
    min-height: 150px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 5px;
    margin-right: 15px;
  }
  .info{
    line-height: 1.5;
    flex: 1 1 auto;

  }
  
}
</style>